<template>
	<view>
		<view v-if="isload">
			<view class="card">
				<view class="qtop">
					<image :src="img"></image>
					<view>
						<view class="qtitle">{{title}}</view>
						<view class="qviews">31.9万人已测<text style="color: #000000;" v-if="isshare">（您的好友测试结果）</text></view>
					</view>
				</view>
				<view class="qtip">测试结果:</view>
				<view class="lock" v-if="!lock" @click="openVideoAd">
					<button>观看广告解锁全部内容</button>
				</view>
				<view class="result" v-else>{{answer}}</view>
			</view>
			<view class="notes">:本结果仅供娱乐参考：{{testtimes}}</view>
			<view class="butn">
				<!-- #ifdef APP-PLUS -->
				<button class="sharebtn" @click="share">分享结果</button>
				<!-- #endif -->
				<!-- #ifndef APP-PLUS -->
				<button class="sharebtn" open-type="share">分享结果</button>
				<!-- #endif -->
				<button class="sharebtn1" @click="gohome" v-if="!isshare">我还想测</button>
				<button class="sharebtn1" @click="goIntroduce(id)" v-else>我也要测</button>
			</view>
			<Moretests :testlist="testlist" @toTest="toTest"></Moretests>
		</view>
		
	</view>
</template>

<script>
	var videoAd = null;
	import API from "../../api.js";
	import Moretests from"../../component/Moretests";
	export default {
		data() {
			return {
				id: "",
				title: "",
				answer: "",
				isshare: false,
				testlist: [],
				testtimes: "",
				isload: false,
				img: "",
				lock:false
			}
		},
		components:{
			Moretests
		},
		onShareAppMessage(res) {
			var that = this;
			console.log(res)
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: "很准的，你也来测试一下吧",
				path: '/pages/result/result?isshare=true&answer=' + that.answer + "&title=" + that.title + "&id=" + that.id +
					"&isshare=true"
			}
		},
		onShareAppMessage: function(shareOption) {
			let that = this;
			if (shareOption.from == 'button') { // 判断是按钮还是右上角分享
				return {
					templateId: '111111', // 分享的模版 id
					title: "趣味测试，点击这里就能找到!", // 分享的标题
					desc: '趣味测评，为你的闲余生活加点乐趣。', // 分享的内容介绍
					path: '/pages/result/result?isshare=true&answer=' + that.answer + "&title=" + that.title + "&id=" + that.id +
						"&isshare=true", // 分享的路径
				}
			} else { // 右上角分享
				return {
					templateId: '111111', // 分享的模版 id
					title: "趣味测试，点击这里就能找到!", // 分享的标题
					desc: '趣味测评，为你的闲余生活加点乐趣。', // 分享的内容介绍
					path: '/pages/result/result?isshare=true&answer=' + that.answer + "&title=" + that.title + "&id=" + that.id +
						"&isshare=true", // 分享的路径
				}
			}
		},
		onLoad(e) {
			var that = this;
			// console.log(e)
			that.title = e.title;
			that.answer = e.answer;
			that.isshare = e.isshare;
			that.id = e.id;
			that.img = e.img;
			this.adLoad();
			this.isDouyin();
			that.getTestList();
			that.count();
			//#ifndef MP-TOUTIAO
			that.lock = false;
			//#endif
			uni.showLoading({
				title: '加载中'
				
			})
			setTimeout(function() {
				that.isload = true;
				uni.hideLoading();
			}, 500);
		},

		methods: {
			gohome: function() {
				uni.reLaunch({
					url: "/pages/index/index"
				})
			},
			getTestList: function() {
				uniCloud.callFunction({
					name: "getTestList",
					data: {
						page: 0
					}
				}).then(res => {
					// console.log(res.result.data)
					this.testlist = res.result.data
				})
			},
			goIntroduce: function(e) {
				// console.log(e)
				uni.reLaunch({
					url: "/pages/introduce/introduce?id=" + e
				})
			},
			toTest: function(e) {
				console.log(e)
				let {id} = e;
				uni.navigateTo({
					url: "/pages/introduce/introduce?id=" + id
				})
			},
			count: function() {
				let appName = uni.getStorageSync("appName");
				var that = this;
				if (appName == "Douyin") {
					let a = uni.getStorageSync("testtimes");
					if (a === "") {
						uni.setStorageSync("testtimes", 0)
						that.testtimes = uni.getStorageSync("testtimes");
					} else {
						let b = a + 1;
						uni.setStorageSync("testtimes", b)
						that.testtimes = uni.getStorageSync("testtimes");
					}

				}
			},
			adLoad: function() {
				// #ifdef MP
				if (wx.createRewardedVideoAd) {
					// 加载激励视频广告
					videoAd = wx.createRewardedVideoAd({
						adUnitId: API.ad.createRewardedVideoAd //你的广告key
					})
					videoAd.onError(err => {})
					videoAd.onClose((status) => {
						if (status && status.isEnded || status === undefined) {
							//这里写广告播放完成后的事件
							this.lock = true
						} else {
							uni.showToast({
								icon: "none",
								title: "您必须观看完广告才能获取结果"
							})
						}
					})
				}
				// #endif 
			},
			
			openVideoAd: function() {
				if (videoAd) {
					videoAd.show().catch(err => {
						// 失败重试
						// console.log("广告拉去失败")
						videoAd.load()
							.then(() => videoAd.show())
					})
				}
			},
			isDouyin: function() {
				let appName = uni.getStorageSync("appName");
				var that = this;
				if (appName == "Douyin") {
					that.lock = false
				}else{
					that.lock = true
				}
			},

		}
	}
</script>

<style lang="less">
	page {
		background-color: #c4f0ff;

		.card {
			margin: 20rpx;
			background-color: #FFFFFF;
			border-radius: 30rpx;
			padding: 30rpx;

			.qtop {
				display: flex;
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #550000;

				image {
					width: 110rpx;
					height: 110rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
				}

				.qtitle {
					font-size: 35rpx;

				}

				.qviews {
					font-size: 30rpx;
					color: #4CD964;
					margin-top: 20rpx;
				}
			}

			.qtip {
				font-size: 35rpx;
				margin: 20rpx 0;
				font-weight: bold;
			}

			.result {
				font-size: 35rpx;
				line-height: 60rpx;
				text-indent: 70rpx;
				padding: 5rpx;
				margin-bottom: 30rpx;
			}
			.lock{
				height: 300rpx;
				background-color: #c4f0ff;
				padding-top: 140rpx;
				border-radius: 30rpx;
				button{
					background-color: #007AFF;
					border: 5rpx solid #FFFFFF;
					width: 500rpx;
					border-radius: 50rpx;
					color: #FFFFFF;
					-webkit-animation: free_download 1s linear alternate infinite;
					animation: free_download 1s linear alternate infinite;
				}
				button::after{
					border: none;
				}
				@-webkit-keyframes free_download {
					0% {
						-webkit-transform: scale(1);
					}
				
					100% {
						-webkit-transform: scale(0.8);
					}
				}
				
				@keyframes free_download {
					0% {
						transform: scale(1);
					}
				
					100% {
						transform: scale(0.8);
					}
				}
				
			}


		}
		.notes{
			text-align: center;
			font-size: 25rpx;
			color: #AAAAAA;
			margin: -10rpx 0 10rpx 0;
		}
		.butn{
			display: flex;
			margin: 20rpx 0 50rpx 0;
			button{
				width: 250rpx;
				border-radius: 50rpx;
				background-color: #4CD964;
				font-size: 35rpx;
				color: #FFFFFF;
			}
			button::after{
				border: none;
			}
		}
	}
	.copyright {
		text-align: center;
		font-size: 25rpx;
		padding: 20rpx 0;
		color: #8c8c8c;
	}
</style>
